// 这个文件就是用来统一配置webpack的

// 这个文件用NodeJs写的，需要使用CommonJs规范

// 插件需要引入，转换器不需要
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  // mode选项表示选择环境
  // development开发环境/production生产环境
  mode: "production",

  // entry选项用来指定我们的项目的入口文件的位置
  // 默认值是"./src/index.js"
  entry: "./src/index.js",

  // output选项用来执行项目的输出的位置
  output: {
    path: path.resolve(__dirname, "dist"), // 相当于 ./dist
    filename: "index.js",
  },

  // loader
  // webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
  module: {
    // rules是一个数组，里面的每一个对象就表示一个转换器规则
    rules: [
      { test: /\.txt$/, use: "raw-loader" },
      {
        // 转换器不需要引入，可以直接用
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

  // 插件(plugin)
  // loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
  plugins: [
    new HtmlWebpackPlugin({
      // template指定html文件在哪里
      template: path.resolve(__dirname, "./src/public/index.html"),
    }),
  ],

  devServer: {
    port: 5273,
    open: true,
  },
};
